/**
 * 学习目标：常见的受控组件
 * 1. 表单的值和 state 关联
 * 2. onChange
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    name: 'zs',
    intro: '描述',
    city: '2',
    single: true,
  };
  /* 
   优化1 -步骤
   1. 在表单元素，设置name的属性，值为要修改的字段
   2. 通过 [e.target.name]，把对象的属性名给设置好，做好了统一修改
   3. 前面三个表单方法，都用用一个方法即可
   */

  /* 
   优化2 - 步骤
   1. 判断传递过来的e.target.type === 'checkbox' ，获取要应该是checked / value
   2. 直接用3元表达式会更好
   3. 解构使用
   */
  handleChange = (e) => {
    const { name, type, checked, value } = e.target;
    this.setState({ [name]: type === 'checkbox' ? checked : value });
  };

  render() {
    return (
      <div>
        姓名：
        <input
          name="name"
          type="text"
          value={this.state.name}
          onChange={this.handleChange}
        />
        <br />
        描述：
        <textarea
          name="intro"
          value={this.state.intro}
          onChange={this.handleChange}
        ></textarea>
        <br />
        城市：
        <select
          name="city"
          value={this.state.city}
          onChange={this.handleChange}
        >
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input
          name="single"
          type="checkbox"
          checked={this.state.single}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
